<template>
	<view class="profile">
		<u-navbar :title="$t('friend.DatingProfile')" :autoBack="false" @leftClick="leftClick(urlIndex)" bgColor="#F6F6F6"
			titleStyle="color: #000000" placeholder>
		</u-navbar>
		<!-- Dating Purpose -->
		<view class="purpose-view">
			<view class="title-view">
				<span class="title"><span class="important">*</span>{{ $t("dating.Purpose") }}</span>
				<!-- <span class="number"
          >(<span class="single">{{ selectLabelList.length }}</span
          >/3)</span
        > -->
			</view>
			<view class="label-view">
				<view class="label" :style="item.isCheck ? 'background: #61BDB2;color: #FFFFFF;' : ''"
					v-for="(item, index) in labelList" :key="index" @click="handleSelect(item,index)">{{ item.labelNameNow }}
				</view>
			</view>
		</view>
		<view class="gender">
			<view class="Female" @click="handleSex(2)" :class="{ active: sexId == 2 }">
				<view class="iconfont icon-nvxing nvxing"></view>
				<view class="name">{{ $t("friend.Female") }}</view>
				<image src="@/static/image/friend/check.png" class="check" v-if="sexId == 2" />
			</view>
			<view class="Male" style="margin-left: 30upx" @click="handleSex(1)" :class="{ active: sexId == 1 }">
				<view class="iconfont icon-nanxing nvxing"></view>
				<view class="name">{{ $t("friend.Male") }}</view>
				<image src="@/static/image/friend/check.png" class="check" v-if="sexId == 1" />
			</view>


		</view>
		<view class="tips mt6">({{$t("dating.sex-cannot-select")}})</view>
		<view class="upload-headshot">
			<view class="pic-select-box" @click="handleUploadImage">
				<image :src="formData.avatarCompress || formData.avatar" alt=""
					v-if="formData.avatarCompress || formData.avatar" class="pic" mode="aspectFill"></image>
				<view class="iconfont icon-zhaoxiangji" v-else></view>
			</view>
			<view class="nick-name">
				<view style="margin-bottom: 30upx;"><span class="important">*</span> {{ $t("friend.Nickname") }}</view>
				<input :placeholder="$t('friend.enter')" v-model="formData.userName" class="input-view"
					style="text-align: left;" placeholder-style="color: #A6A6A6;" :disabled="!!formData.userPersonalsId" />
			</view>
		</view>
		<view class="content-view">
			<view class="content-detail">
				<view style="margin-right: 10upx;"><span class="important">*</span>{{ $t("dating.Location") }}</view>
				<regionSelect ref="regionSelect" :cityValue.sync="formData.location" :isEditor="!!formData.userPersonalsId"
					@countryIosCode="getCurrentPostCity" @totalValue="getTotalValue"></regionSelect>
				<view class="iconfont icon-jiantou-you arrow-icon" @click="$refs.regionSelect.show = true"></view>
			</view>
			<view class="content-detail">
				<view><span class="important">*</span>{{ $t("friend.Age") }} <text class="tips">{{$t('dating.userAge-tip')}}</text> </view>
				<view class="w200">
					<input :placeholder="$t('friend.enter')" v-model="formData.userAge" class="input-view" type="number"
						@blur="numInput(formData.userAge,200,'userAge',1)" placeholder-style="color: rgba(0, 0, 0, 0.3);"
						maxlength="3" />
				</view>
			</view>
			<view class="content-detail">
				<view>{{ $t("friend.Height") }}</view>
				<view class="detail">
					<input :placeholder="$t('friend.enter')" v-model="userJson.height" class="input-view" type="number"
						@blur="numInput(userJson.height,300,'height',2)" placeholder-style="color: rgba(0, 0, 0, 0.3);"
						maxlength="7" />
					<view class="danwei">cm</view>
				</view>
			</view>
			<view class="content-detail">
				<view>{{ $t("friend.Weight") }}</view>
				<view class="detail">
					<input :placeholder="$t('friend.enter')" v-model="userJson.weight" class="input-view" type="number"
						@blur="numInput(userJson.weight,500,'weight',2)" placeholder-style="color: rgba(0, 0, 0, 0.3);"
						maxlength="7" />
					<view class="danwei">kg</view>
				</view>
			</view>
		</view>

		<!-- About Me and Require -->
		<view class="require-view">
			<view class="title"><span class="important">*</span>{{ $t("friend.AboutMeandRequire") }}</view>
			<u-textarea v-model="userJson.brief" :maxlength="300" class="textarea-view" :placeholder="$t('friend.enterTitle')"
				placeholder-style="color: rgba(0, 0, 0, 0.3);" count></u-textarea>
		</view>
		<view class="title-view" v-if="!formData.userPersonalsId && false">
			<view>{{ $t('dating.postMoneyTip1Frist') }}<text
					class="price">{{ currencyObj.symbol }}{{ bondObj.bond }}</text>{{ $t('dating.postMoneyTip1Last') }}</view>
			<view>{{ $t('dating.postMoneyTip2') }}</view>
		</view>

		<!-- 用户协议 -->
		<view class="user-agreement">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<u-checkbox size="14" activeColor="#61BDB2" name="userAgree">
				</u-checkbox>
			</u-checkbox-group>
			<text>{{ $t("login.userAgree") }}
				<text style="color: #61bdb2" @click="gotoUserGreen">{{ $t("login.userAgreeGreen") }}</text>
			</text>
		</view>

		<!-- btn -->
		<view class="btn-view">
			<view class="EditMore" @click="handlePost(true)">{{ $t('next') }}</view>
			<view class="btn" @click="handlePost(false)">{{ $t("friend.post") }}</view>
		</view>
	</view>
</template>

<script>
	import {
		queryLabelList,
		friendInfoAdd,
		updateFriendInfo,
		getBondInfo
	} from "@/services/makeFriend";
	import config from "@/config/app.config";
	import store from "@/store/index";
	import regionSelect from "./components/regionSelect.vue";
	import {
		queryCountryCurrency
	} from '@/services/feeServices.js'

	export default {
		components: {
			regionSelect
		},
		data() {
			return {
				labelList: [],
				selectLabelList: [],
				userJson: {
					weight: "",
					height: "",
					brief: "",
				},
				formData: {
					location: [],
					userName: "",
					avatar: "",
					avatarCompress: "",
					userAge: "",
					birthday: "",
					userJson: "",
					chat: 0,
					price: 0,
					currencyId: 0,
					currency: "",
					gender: "0",
					country: "",
					region: "",
					longitude: 112132.12,
					latitude: 12.121112,
					voice: "",
					remark: "",
					labelBoList: [],
					jyUserAlbumPay: {
						imageUrl: "",
						imageUrlCompress: "",
						isPay: 0,
						price: 0,
						currencyId: 0,
						currency: "",
					},
					userImageList: [],
					jyUserAlbum: {},
					userImagePayList: [],
				},
				sexId: 2,
				language: '',
				currencyObj: {},
				bondObj: {},
				femalePic: 'http://www.omlook.com/imol/default_female.png',
				malePic: 'http://www.omlook.com/imol/default_male.png',
				countryIosCode: 'RU',
				urlIndex: 'EditData',
				checkboxValue: [], // 勾选用户协议
				userAgree: false, // 用户协议
			};
		},
		methods: {
			numInput(num, limit, key, type) {
				if (
					parseFloat(num) >= parseFloat(limit)
				) {
					if (type === 1) {
						this.formData[key] = ''
					} else if (type === 2) {
						this.userJson[key] = ''
					}

				}
				console.log(num, limit, '1000');
			},
			checkboxChange(n) {
				// 长度大于0表示已经勾选用户协议
				if (n.length > 0) {
					this.userAgree = true;
				} else {
					this.userAgree = false;
				}
			},
			getTotalValue(value) {
				// console.log(value)
				this.formData.regionNewString = JSON.stringify(value)
			},
			// 返回上一页
			gotoBack() {
				this.leftClick(this.urlIndex)
				// uni.redirectTo({
				// 	url: '/pagesDiscover/friendsInformation/FriendsInformation'
				// });
			},
			async getCurrentPostCity(e) {
				this.countryIosCode = e
			},
			handleSex(id) {
				// uni.showToast({
				//   title: this.$t("dating.sex-cannot-select"),
				//   icon: "none",
				// });
				if (!!this.formData.userPersonalsId) {
					return
				}
				this.sexId = id;
			},
			handleSelect(item, index) {
				// if (!!this.formData.userPersonalsId) {
				//   return
				// }
				this.labelList[index].isCheck = !this.labelList[index].isCheck
				this.selectLabelList = this.labelList.filter((item) => item.isCheck);
			},
			getLabelLangType(obj) {
				if (this.language === 'zh-Hans') {
					return obj.label.cn
				} else if (this.language === 'en') {
					return obj.label.en
				} else if (this.language === 'ru') {
					return obj.label.ru
				}
			},
			//获取交友标签列表
			async handleLableList() {
				const resp = await queryLabelList({
					language: 'zh-Hans'
				});
				if (!resp.success) return;
				this.labelList = resp.result.data.map((item) => {
					item.label = JSON.parse(item.labelName)
					return {
						...item,
						isCheck: false,
						labelNameNow: this.getLabelLangType(item)
					}
				}).reverse();
			},
			async handlePost(next) {
				if (!this.isExit()) {
					return
				}
				if (
					(this.userJson.weight && this.userJson.weight < 0) ||
					(this.userJson.height && this.userJson.height < 0) ||
					this.formData.userAge < 0
				) {
					uni.showToast({
						title: this.$t("friend.title"),
						icon: "none",
					});
					return;
				}
				if (this.formData.userAge > 1000) {
					uni.showToast({
						title: this.$t("friend.greater"),
						icon: "none",
					});
					return;
				}
				let ChinaObj = {
					cn: '中国',
					en: 'China',
					ru: 'Китай'
				}
				let RussiaObj = {
					cn: '俄罗斯',
					en: 'Russia',
					ru: 'Российская Федерация'
				}
				this.formData.gender = this.sexId;
				this.formData.userJson = JSON.stringify(this.userJson);
				this.formData.labelBoList = this.selectLabelList;
				// this.formData.avatar = this.formData.avatar ? this.formData.avatar : this.formData.gender === 1 ? this.malePic : this.femalePic
				// this.formData.avatarCompress = this.formData.avatarCompress ? this.formData.avatarCompress : this.formData.gender === 1 ? this.malePic : this.femalePic
				this.formData.country = this.formData.country || (JSON.stringify(this.countryIosCode === 'CN' ? ChinaObj :
						RussiaObj)),
					this.formData.region = this.formData.regionNewString
				console.log(this.formData)
				// 下一步
				if (next) {
					this.formData.avatar = this.formData.avatar ? this.formData.avatar : this.formData.gender === 1 ? this
						.malePic : this.femalePic
					this.formData.avatarCompress = this.formData.avatarCompress ? this.formData.avatarCompress : this.formData
						.gender === 1 ? this.malePic : this.femalePic
					uni.navigateTo({
						url: `/pagesDiscover/friendsInformation/UploadPhotos?type=0&formData=${JSON.stringify(this.formData)}`,
					});
				} else {
					if (this.formData.userPersonalsId) {
						this.getPeopleUpdate()
					} else {
						this.getPeopleAdd()
					}
				}
			},
			async getPeopleAdd() {
				const resp = await friendInfoAdd({
					...this.formData,
					avatar: this.formData.avatar ? this.formData.avatar : this.formData.gender === 1 ? this.malePic : this
						.femalePic,
					avatarCompress: this.formData.avatarCompress ? this.formData.avatarCompress : this.formData.gender ===
						1 ? this.malePic : this.femalePic,
				})
				if (resp.result.code == 200) {
					this.gotoBack()
				}
			},
			async getPeopleUpdate() {
				const resp = await updateFriendInfo(this.formData)
				if (resp.result.code == 200) {
					this.gotoBack()
				}
			},
			// 获取保证金
			async getCurrency() {
				const resp = await queryCountryCurrency()
				if (resp.result.code === 200) {
					this.currencyObj = resp.result.data
					this.getBond()
				}
			},
			async getBond() {
				const resp = await getBondInfo({
					currencyId: this.currencyObj.id
				})
				if (resp.result.code === 200) {
					this.bondObj = resp.result.data
				}
			},
			// 上传头像
			async handleUploadImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ["camera", "album"],
					success: async (res) => {
						console.log(res);
						if (res.tempFiles[0].size > 5 * 1024 * 1024) {
							uni.showToast({
								title: this.$t("dating.picLimit", {
									value: 5
								}),
								icon: "none",
							});
							return
						}
						uni.showLoading();
						const result = await this.uploadFilePromise(res.tempFilePaths[0]);
						uni.hideLoading();
						console.log(result);
						this.formData.avatar = result.url
						this.formData.avatarCompress = result.compressImage || result.url
					},
				});
			},
			//上传路径
			uploadFilePromise(url) {
				console.log(url);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						header: {
							Authorization: `Bearer ${store.state.token}`,
							version: config.version,
						},
						formData: {
							user: "upload",
						},
						success: (res) => {
							const resp = JSON.parse(res.data);
							setTimeout(() => {
								resolve(resp.data);
							}, 1000);
						},
					});
				});
			},
			isExit() {
				// if (!this.formData.avatar) {
				//   uni.showToast({
				//     icon: 'none',
				//     title: this.$t('dating.avatar-none')
				//   })
				//   return false
				// }
				if (!this.userAgree) {
					uni.showToast({
						icon: 'none',
						title: this.$t("login.needAgree")
					})
					return false
				}
				if (!this.formData.userName) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.userName-none')
					})
					return false
				}
				if (!this.formData.location || this.formData.location.length < 2) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.location-none')
					})
					return false
				}
				if (!this.formData.userAge) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.userAge-none')
					})
					return false
				}
				// 判断年龄是否小于18
				if (Number(this.formData.userAge) < 18) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.userAge-max')
					})
					return false
				}
				// if (!this.formData.height) {
				//   uni.showToast({
				//     icon: 'none',
				//     title: this.$t('dating.height-none')
				//   })
				//   return false
				// }
				// if (!this.formData.weight) {
				//   uni.showToast({
				//     icon: 'none',
				//     title: this.$t('dating.weight-none')
				//   })
				//   return false
				// }
				if (!this.selectLabelList || this.selectLabelList.length === 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.labelBoList-none')
					})
					return false
				}
				if (!this.userJson.brief) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.brief-none')
					})
					return false
				}
				return true
			}
		},
		async onLoad(option) {
			this.language = uni.getLocale();
			this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
			await this.handleLableList();
			// await this.getCurrency();
			if (option.formData) {
				this.formData = this.$store.state.friendsInformation;
				this.formData.regionNewString = this.formData.region
				this.formData.location = this.formData.region ? this.getRegionNameList(JSON.parse(this.formData.region)) : []
				this.$refs.regionSelect.init(this.formData.location)
				console.log(this.formData, "frfr");
				this.userJson = JSON.parse(this.formData.userJson);
				this.sexId = this.formData.gender;
				if (this.formData.labelBoList.length) {
					// let labelList = this.formData.labelBoList.map((item) => {
					//   const newList = [];
					//   const resp = this.labelList.filter(
					//     (litem) => litem.labelId == item.labelId
					//   );
					//   newList.push(resp[0]);
					//   return newList;
					// });
					// labelList.map((item) => {
					//   item.map((fitem) => {
					//     fitem.isCheck = true;
					//     return fitem;
					//   });
					// });
					this.formData.labelBoList.map((item) => {
						this.labelList.map(item1 => {
							if (item.labelId === item1.labelId) {
								item1.isCheck = true
							}
						})
					});
					this.selectLabelList = this.formData.labelBoList;
				}
			} else {
				this.$refs.regionSelect.init([])
			}
		},
	};
</script>

<style lang="scss" scoped>
	.important {
		color: red;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}

	.tips {
		color: #FE6600;
		font-size: 24rpx;
	}

	.w200 {
		width: 200rpx;
	}

	.mt6 {
		margin-top: 6rpx;
	}

	::v-deep .uni-textarea-placeholder {
		font-size: 28upx;
		font-weight: 400;
	}

	::v-deep .uni-textarea-textarea {
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
	}

	::v-deep .u-textarea__field {
		min-height: 240upx !important;
	}

	::v-deep .u-textarea__count {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.3);
	}

	// 用户协议
	.user-agreement {
		margin-top: 52upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #a6a6a6;
	}

	.profile {
		padding: 30upx;

		.gender {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30upx;

			.Female {
				width: 50%;
				height: 110upx;
				background: #ffffff;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				box-sizing: border-box;

				&.active {
					border: 2upx solid #61bdb2;
				}

				.check {
					position: absolute;
					width: 56upx;
					height: 56upx;
					right: -1upx;
					bottom: -1upx;
				}
			}

			.Male {
				width: 50%;
				height: 110upx;
				background: #ffffff;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				box-sizing: border-box;

				&.active {
					border: 2upx solid #61bdb2;
				}

				.check {
					position: absolute;
					width: 56upx;
					height: 56upx;
					right: -1upx;
					bottom: -1upx;
				}
			}

			.nvxing {
				color: #61bdb2;
				margin-right: 36upx;
				font-size: 40upx;
			}

			.name {
				font-size: 34upx;
				font-weight: 500;
				color: #61BDB2;
			}
		}

		.upload-headshot {
			width: 100%;
			height: 210upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-top: 30upx;
			display: flex;
			align-items: center;

			.pic-select-box {
				width: 150upx;
				height: 150upx;
				background: #E8F3F2;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 53upx;

				.icon-zhaoxiangji {
					font-size: 60upx;
					color: #61BDB2;
				}

				.pic {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}
			}

			.nick-name {
				flex: 1;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
			}
		}

		.input-view {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			text-align: right;
		}
	}

	.content-view {
		padding: 0upx 33upx;
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 30upx;

		.content-detail {
			padding: 40upx 0upx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #f6f6f6;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;

			.detail {
				display: flex;
				align-items: center;
			}

			.arrow-icon {
				color: #a6a6a6;
				font-size: 30upx;
				margin-left: 20upx;
			}

			.danwei {
				font-size: 30upx;
				font-weight: 400;
				color: #000000;
				margin-left: 13upx;
			}
		}
	}

	.title {
		font-size: 30upx;
		font-weight: 400;
		color: #000000;
	}

	.purpose-view {
		padding: 30upx;
		background: #ffffff;
		border-radius: 20upx;

		.title-view {
			display: flex;
			align-items: center;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin: 0upx;

			.number {
				font-size: 26upx;
				font-weight: 400;
				color: #878787;
			}

			.single {
				font-size: 26upx;
				font-weight: 400;
				color: #61bdb2;
			}
		}

		.label-view {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 25upx;
		}

		.label {
			padding: 20upx 25upx;
			background: #f6f6f6;
			border-radius: 12upx;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.3);
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
	}

	.require-view {
		height: fit-content;
		padding: 30upx;
		margin-top: 30upx;
		background: #ffffff;
		border-radius: 20upx;
		padding-bottom: 20upx;

		.textarea-view {
			border: none;
			margin-top: 30upx;
			padding: 0upx;
		}
	}

	.btn-view {
		display: flex;
		align-items: center;
		margin-top: 30upx;
		justify-content: space-between;

		.btn {
			width: 50%;
			height: 90upx;
			background: #61bdb2;
			border-radius: 20upx;
			font-size: 30upx;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			line-height: 90upx;
		}

		.EditMore {
			width: 50%;
			height: 90upx;
			background: #ffffff;
			border: 2upx solid #61bdb2;
			border-radius: 20upx;
			font-size: 30upx;
			font-weight: 500;
			color: #61bdb2;
			margin-right: 26upx;
			text-align: center;
			line-height: 90upx;
		}
	}

	.title-view {
		font-size: 26upx;
		font-weight: 400;
		color: #878787;
		margin-top: 30upx;

		.price {
			font-size: 26upx;
			font-weight: bold;
			color: #fe6600;
			margin: 0upx 10upx;
		}
	}
</style>